<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="pageFile" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="文件名" name="title">
          <Input v-model:value="formState.filename" allow-clear placeholder="文件名" />
        </FormItem>
        <FormItem label="分组" name="fileGroup" style="width: 200px">
          <Select v-model="formState.fileGroup" allow-clear placeholder="分组">
            <SelectOption value="KQSY-CLOUD">KQSY-CLOUD</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="创建时间" name="fileGroup">
          <RangePicker value-format="YYYY-MM-DD HH:mm:ss" show-time @change="rpChange" />
        </FormItem>
      </template>
      <template #toolBtn>
        <Upload
          name="file"
          :headers="headers"
          action="/basic-api/file/sysFile/upload"
          @change="handleChange"
        >
          <Button type="primary" :loading="uploadLoading">上传</Button>
          <template #itemRender></template>
        </Upload>
      </template>
      <template #operation="{ record }">
        <Space>
          <a class="red" @click="handleDelete(record)">删除</a>
          <a @click="handleDownload(record)">下载</a>
        </Space>
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { pageFile, deleteFile } from '/@/api/sys/file'
  import { Table } from '/@/components/Table'
  import {
    FormItem,
    Input,
    RangePicker,
    Select,
    SelectOption,
    message,
    Button,
    Upload,
    Space,
    Modal,
  } from 'ant-design-vue'
  import { getToken } from '/@/utils/auth'

  const table: any = ref(null)

  const columns = ref([
    {
      title: '文件编号',
      dataIndex: 'id',
    },
    {
      title: '文件名称',
      dataIndex: 'filename',
    },
    {
      title: '第三方唯一标识',
      dataIndex: 'objectId',
    },
    {
      title: '分组',
      dataIndex: 'fileGroup',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'operation',
      dataIndex: 'operation',
      fixed: 'right',
    },
  ])

  const formState = ref({
    filename: '',
    fileGroup: '',
    beginTime: '',
    endTime: '',
  })

  const rpChange = (v) => {
    if (v) {
      formState.value.beginTime = v[0]
      formState.value.endTime = v[1]
    } else {
      formState.value.beginTime = ''
      formState.value.endTime = ''
    }
  }

  const reset = () => {
    formState.value = {
      filename: '',
      fileGroup: '',
      beginTime: '',
      endTime: '',
    }
  }

  const uploadLoading = ref(false)
  const headers = {
    Authorization: `Bearer ${getToken()}`,
  }
  const handleChange = (info) => {
    uploadLoading.value = true
    if (info.file.status !== 'done') {
      return
    }
    if (info.file.response.code === 200) {
      uploadLoading.value = false
      message.success('上传成功')
      table.value.handleQuery()
    } else {
      uploadLoading.value = false
      message.error(info.file.response.message)
    }
  }

  const handleDownload = (record: any) => {
    console.log(record.url)
    window.open(record.url)
  }
  const handleDelete = (record: any) => {
    Modal.confirm({
      content: '确认要删除吗？',
      async onOk() {
        await deleteFile(record.id)
        table.value.handleQuery()
      },
    })
  }
</script>
